<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="7" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 2px;">
            <span style="color: #2d8cf0;">
                <Icon class="ivu-icon-dataExplore" />&nbsp;&nbsp;
                <span style="color: black;">数据管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                <span style="color: black;">SQL查询&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                可视化探索
            </span>
            </Col>
            <Col span="4" offset="13" style="display: flex;justify-content: flex-end;margin-top: -4px;">
                <Button type="warning" 
                label="small" 
                class="btnOperation"
                @click="jumpPage('/echart')"
                >上一步</Button>
                <Button 
                type="primary" 
                @click="jumpPage('/showIcon')"
                label="small" 
                class="btnOperation btnMargin">下一步</Button>
            </Col>
        </Row>
        <Row>
            <Col span="16" offset="8" class="dimensionContent" style="color: #515a6d;font-size: 14px;">
                <p class="dimensionTop">您选择的是<span>"{{echartCon}}"</span></p>
                <div style="margin-bottom: 15px;" v-for="(item,index) in typeArr" :key="index">
                    <span style="display: inline-block;width: 100px;">{{item.name}} ：</span>
                    <Select  style="width:300px;"
                    v-model="item.value"
                    >
                        <Option v-for="(items,ind) in item.type" 
                        @click.change.native = "changea($event,index)"
                        :value="items" 
                        :key="ind">{{ items }}</Option>
                    </Select>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex'
    import zmitiUtil from '../../../lib/util'
    import {echartType} from '../../../lib/table_definition'
    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                echartCon:"",
                typeArr:[]
            }
        },
        mounted() {   
            this.getEchart()
        },
        methods: {
            getEchart(){
                echartType.map((item,index) =>{
                    item.items.forEach((val,index) =>{
                        if(val.chart == this.$route.query.chartName){
                            this.echartCon = val.name
                        }
                    })
               }) 
               let config = JSON.parse(this.$route.query.config)
               var typeArr = Object.keys(config);
               typeArr.forEach((item,index) => {
                     this.typeArr.push({
                        name:item,
                        value:"",
                        type:config[item]
                        // type:[{
                        //   value: config[item],
                        //   label: config[item]
                        // }]
                     })
               })
            },
            jumpPage(page){
                if(page == "/echart"){
                    this.$router.push({
                        path: page,
                        query:{
                        dims:this.$route.query.dims,
                        values:this.$route.query.values,
                        }
                    })
                    return;
                }
                 let config = {}
                 this.typeArr.map((item,index) => {
                     if(item.value){
                        config[item.name] = item.value
                     }
                 })
                 if(JSON.stringify(config) == '{}'){
                       alert("请配置图标类型");
                       return;
                 }
                var path='table/configDone';
                let postData = {
                      chart:this.$route.query.chartName,
                      dims:JSON.parse(this.$route.query.dims),
                      values:JSON.parse(this.$route.query.values),
                      config:config
                    }
                    zmitiUtil.Ajax(path,postData).then(res => {
                        var data = res.data;
                        if(data.code == 1){
                            this.$router.push({
                                path: page,
                                query:{
                                    dims:this.$route.query.dims,
                                    values:this.$route.query.values,
                                    chartName:this.$route.query.chartName,
                                    config:this.$route.query.config,
                                    selectConfig: JSON.stringify(config),
                                    seriesOne:this.$route.query.seriesOne,
                                    seriesTwo:this.$route.query.seriesTwo
                                }
                            });
                        }else{
                            alert("配置失败")
                        }
                    }).catch((error) => {
                        console.log(error,'error');
                    }); 
                
            },
            changea(event,index){
                if(this.$route.query.chartName == 'line_bar'){
                    if(index!=0){
                     return;
                    }
                    var selectTypeOne = "";
                    if(this.typeArr[0].value){
                        selectTypeOne = this.typeArr[0].value
                    }
                    if(this.$route.query.seriesOne){
                        var seriesOne = JSON.parse(this.$route.query.seriesOne)
                        var seriesTwo = JSON.parse(this.$route.query.seriesTwo)
                        if(selectTypeOne == 'weekday'){
                            this.typeArr[1].type = seriesTwo
                        }else{
                            this.typeArr[1].type = seriesOne
                        }
                    }
                    
                }
            }
        },
        created() {
        },
        watch:{
            
        },
    }
</script>
<style scoped>
    .btnOperation{
        height: 27px;
    }
    .btnMargin{
        margin-left: 1.125rem;
    }
    .ivu-icon-dataExplore{
        width: 16px;
        height: 16px;
        background: url("../../../assets/dataExplore.png") no-repeat;
        background-size: 100%;
        position: relative;
        display: inline-block;
        top: 2px;
    }
    .dimensionTop{
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 16px;
    }
    .dimensionTop span{
        color: #0e7fff;
    }
</style>
<style>
    .dimensionContent .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        line-height: 45px;
        height: 45px;
    }
    .dimensionContent .ivu-select-single .ivu-select-selection{
        height: 45px;
    }
</style>